<!--开发商名录-->
<template>
  <div class="developers">
    <!--开发商名录头部-->
    <div class="developers-header">
      <div class="developers-header-title">开发商名录查看</div>
      <div class="search">
        <div class="search-input">
          <el-input placeholder="请输入开发商名称或楼盘名称" prefix-icon="el-icon-search" v-model="deveForm.name"></el-input>
        </div>
        <div class="search-bt">
          <el-button type="primary" @click="directories()">搜索</el-button>
        </div>
      </div>
    </div>
    <!--开发商名录表格-->
    <div class="developers-cont">
      <div class="developers-table" style="width: 100%;">
        <el-table :data="directorList2" style="width: 50%;float:left" border
          :header-cell-style="{color:'#98A9BC'}">
          <!-- <el-table-column label="序号" align="center" type="index" min-width="5%"></el-table-column> -->
          <el-table-column label="楼盘名称" align="center"  min-width="25%" >
              <template slot-scope="scope">
                <el-popover trigger="click" placement="top">
                  <el-table :data='scope.row.contacterList' border>
                      <el-table-column label="联系人" align="center" prop="contacter"></el-table-column>
                      <el-table-column label="电话1" align="center"  width="110%" prop="phone"></el-table-column>
                      <el-table-column label="电话2" align="center"  width="110%" prop="tel"></el-table-column>
                  </el-table>
                  <div slot="reference" class="name-wrapper">
                    {{scope.row.buildingName}}
                  </div>
                </el-popover>
              </template>
          </el-table-column>
          <!-- <el-table-column label="开发商" align="center" prop="developer" min-width="20%"></el-table-column>
          <el-table-column label="地址" align="center" prop="address" min-width="20%"></el-table-column>
          <el-table-column label="联系人" align="center" prop="contacter" min-width="15%"></el-table-column>
          <el-table-column label="电话" align="center" min-width="15%">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <div style="text-align: center;">{{scope.row.phone}}</div>
                <div slot="reference" class="name-wrapper">
                  <i class="el-icon-phone-outline" style="font-size: 16px;"></i>
                </div>
              </el-popover>
            </template>
          </el-table-column> -->
        </el-table>
        <el-table :data="directorList1" style="width: 50%;float:left" border
          :header-cell-style="{color:'#98A9BC'}">
          <!-- <el-table-column label="序号" align="center" type="index" min-width="5%"></el-table-column> -->
          <el-table-column label="楼盘名称" align="center"  min-width="25%" >
              <template slot-scope="scope">
                <el-popover trigger="click" placement="top">
                  <el-table :data='scope.row.contacterList' border>
                      <el-table-column label="联系人" align="center" prop="contacter"></el-table-column>
                      <el-table-column label="电话1" align="center"  width="110%" prop="phone"></el-table-column>
                      <el-table-column label="电话2" align="center"  width="110%" prop="tel"></el-table-column>
                  </el-table>
                  <div slot="reference" class="name-wrapper">
                    {{scope.row.buildingName}}
                  </div>
                </el-popover>
              </template>
          </el-table-column>
          <!-- <el-table-column label="开发商" align="center" prop="developer" min-width="20%"></el-table-column>
          <el-table-column label="地址" align="center" prop="address" min-width="20%"></el-table-column>
          <el-table-column label="联系人" align="center" prop="contacter" min-width="15%"></el-table-column>
          <el-table-column label="电话" align="center" min-width="15%">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <div style="text-align: center;">{{scope.row.phone}}</div>
                <div slot="reference" class="name-wrapper">
                  <i class="el-icon-phone-outline" style="font-size: 16px;"></i>
                </div>
              </el-popover>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div style="clear:both"></div>
      <div class="developers-page">
        <el-pagination
          @size-change="(val) => {deveForm.size=val;directories()}"
          @current-change="(val) => {deveForm.page=val;directories()}"
          background
          :page-sizes="[10, 20, 30, 40]"
          :page-size="deveForm.size"
          :current-page.sync="deveForm.page"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import * as otherAPI from "@/api/others";
export default {
  name: "Developers",
  data() {
    return {
      deveForm: {
        name: "",
        page: 1,
        size: 10
      },
      directorList: [],
      directorList1:[],
      directorList2:[],
      total: 0,
      // list:[{
      //       "buildingName":"楼盘名称1",
      //       "contacterList":[
      //           {
      //               "contacter":"name",
      //               "tel":12132,
      //               "phone":12364
      //           },
      //           {
      //               "contacter":"name",
      //               "tel":12132,
      //               "phone":12364
      //           },
      //           {
      //               "contacter":"name",
      //               "tel":12132,
      //               "phone":12364
      //           },
      //       ]
      // }]
    };
  },
  created() {
    this.directories();
  },
  methods: {
    // 获取开发商名录
    directories() {
      var $this = this;
      this.directorList1=[];
      this.directorList2=[];
      otherAPI
        .getDeveloperList(this.deveForm)
        .then(response => {
          this.directorList = response.data.list;
          this.total = response.data.total;
          this.directorList.forEach(function(data,index){
            if(index%2==1){
              $this.directorList1.push(data)
            }else if(index%2==0){
              $this.directorList2.push(data);
            }
          })
        })
        .catch(err => {
          console.log("开发商名录==>", err);
        });
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.developers {
  padding: 25px;
  height: auto;
  overflow: auto;
}
/*开发商名录头部搜索样式*/
.developers-header {
  display: flex;
  padding: 30px 45px 10px 45px;
  background: #ffffff;
  position: relative;
}
.developers-header-title {
  color: #778ca2;
  font-size: 12px;
  padding-top: 15px;
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 30px;
  right: 45px;
}
.search-bt {
  margin-left: 15px;
}
/*开发商名录表格样式*/
.developers-cont {
  background: #ffffff;
  padding: 30px 30px;
}
.developers-table {
  border: 1px solid #ebeef5;
  border-bottom: none;
}
.developers-page {
  display: flex;
  justify-content: center;
  padding: 35px 0 15px 0;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #009fe8;
}
</style>
